<template>
  <div class="rank-box">
    <div class="header">
      <span><Ranking fill="#ffd700" /> 排行榜</span>
      <Refresh class="pointer" :class="{ refreshing }" color="#2c303e" @click="refresh" />
    </div>
    <ul class="list p-20">
      <li v-for="(name, idx) in names" :key="name" class="rank-item">
        <div class="icon">
          <template v-if="idx <= 2">
            <Crown theme="filled" :size="24" :fill="colors[idx]" />
          </template>
          <template v-else>
            <span class="circle">{{ idx }}</span>
          </template>
        </div>
        <div class="info">
          <el-avatar src="http://comicui.cn/image/avatar.png" />
          <div class="name">
            <div>{{ name }}</div>
          </div>
        </div>
        <div class="nums">152,457</div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { Refresh } from '@icon-park/vue-next';
import { Ranking, Crown } from '@icon-park/vue-next';

const refreshing = ref(false);

const names = ['史萱', '景鸿', '宫昌淼', '空曜曦', '裘语'];
const colors = ['#ffd700', '#c0c0c0', '#b87333'];

function refresh() {
  refreshing.value = true;
  setTimeout(() => {
    //do something
    refreshing.value = false;
  }, 1000);
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  border-bottom: 1px solid var(--admin-border-color);
  font-size: 14px;
}
.rank-box {
  .list {
    height: 400px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;

    li {
      flex: 1;
      display: flex;
      align-items: center;

      .icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;

        .circle {
          width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          background-color: #c9c9c9;
          border-radius: 50%;
          color: #ffffff;
        }
      }
      .info {
        display: flex;
        align-items: center;
        font-size: 13px;

        .name {
          margin-left: 10px;
        }
      }
      .nums {
        margin-left: auto;
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>
